<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.js"></script>

</head>
<body>

<script>


</script>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModel">
    Launch demo modal
</button>







<div id="myModel"  class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <span style="font-size: 20px;font-weight: bold" id="gridSystemModalLabel">购买会员 &nbsp</span><span style="font-size: 8px">账号:</span>
            </div>

            <div class="modal-body">
                <div  class="row">

                    <div class="col-lg-4" >

                        <div style="text-align: center;border: solid 1px chocolate ;border-radius: 5px;
                        background-color: #f3fffd" class="col-lg-10">

                            <h4 style="color: #985f0d">月卡</h4>
                            <span style="color: #985f0d">￥</span><span
                                style="font-size: 30px;color: #985f0d;text-align: center">120</span>
                            <p style="text-decoration: line-through;">￥200</p>
                        </div>
                    </div>


                    <div class="col-lg-4" style="margin: auto" >
                        <div style="text-align: center;border: solid 1px chocolate ;border-radius: 5px;
                        background-color: #f3fffd" class="col-lg-10" >

                            <h4 style="color: #985f0d">月卡</h4>
                            <span style="color: #985f0d">￥</span><span
                                style="font-size: 30px;color: #985f0d;text-align: center">120</span>
                            <p style="text-decoration: line-through;">￥200</p>
                        </div>
                    </div>

                    <div class="col-lg-4" style="margin: auto " >
                        <div style="text-align: center;border: solid 1px chocolate ;border-radius: 5px;
                        background-color: #f8ffff" class="col-lg-10" >

                            <h4 style="color: #985f0d">月卡</h4>
                            <span style="color: #985f0d">￥</span><span
                                style="font-size: 30px;color: #985f0d;text-align: center">120</span>
                            <p style="text-decoration: line-through;">￥200</p>
                        </div>
                    </div>

                </div>


                <div  class="row" style="margin-top: 10px">
                    <div class="col-lg-3 " style="padding-top: 8px">选择优惠:</div>
                    <div class="col-lg-4 col-lg-offset-5" style="text-align: right">
                        <img src="image/yoiuhui.png">
                        <span style="font-size: 20px;color: #ffd45a">6折</span> </div>
                </div>
                <div  class="row" style="margin-top: 10px;margin-bottom: 10px">
                    <div class="col-lg-4 " style="padding-top: 6px">支付方式:</div>
                    <div class="col-lg-4 col-lg-offset-4" style="text-align: right"><img style="width: 150px" src="image/zhifu.png"></div>
                </div>
                <div  style="border: 0.5px  solid;border-color: rgba(33,26,25,0.8) ">

                    <div class="row" style="padding-left: 35px;padding-top:10px; height: 30px">扫码支付</div>

                    <div class="row" style="height: 180px">

                        <div style="padding-left: 20px" class="col-lg-8 col-lg-offset-4">
                            <img height="150px" width="150px" src="image/pay.png">
                            支付金额120远
                        </div>


                    </div>

                    <div class="row" style="text-align: center;color: #5e5e5e;font-size: 10px;padding-bottom: 20px">
                        扫码表示您同意《会员协议》

                    </div>

                </div>


            </div>
        </div>

    </div>

</div>


</body>
</html>